<template>
  <section class="my-4 grid grid-cols-4 gap-2">
    <!-- 标签 -->
    <section class="col-span-1">
      <Condition
        v-for="(condition, index) in studentSearchCondition"
        :key="index"
        :onDelete="() => onDelete(index)"
        v-if="isStudentList"
        >{{ condition }}</Condition
      >
      <Condition
        v-for="(condition, index) in scoreSearchCondition"
        :key="index"
        :onDelete="() => onDelete(index)"
        v-if="!isStudentList"
        >{{ condition }}</Condition
      >
    </section>
    <!-- 搜索 -->
    <div class="col-span-2 flex justify-center">
      <label class="input input-xl flex gap-2 w-3/5">
        <!-- <kbd class="kbd kbd-sm">⌘</kbd>
        <kbd class="kbd kbd-sm">K</kbd> -->
        <input
          type="search"
          class="grow"
          placeholder="Search"
          v-model="searchString"
        />

        <svg
          class="h-[1em] opacity-50 cursor-pointer"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          @click="onSearch"
        >
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="2.5"
            fill="none"
            stroke="currentColor"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </g>
        </svg>
      </label>
    </div>
    <!-- 新增 -->
    <div class="col-span-1 text-center">
      <button
        class="btn btn-lg btn-primary"
        @click="onClick()"
        v-if="!isStudent"
      >
        {{ route.name === "score" ? "Upload Score" : "Add Student" }}
      </button>
    </div>
  </section>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
import { storeToRefs } from "pinia";
import { useToast } from "vue-toastification";
import { ref, computed } from "vue";
import { useSearchStore } from "@/stores/search";
import Condition from "./Condition.vue";

const searchStore = useSearchStore();

const userStore = useUserStore();
const { isStudent } = storeToRefs(userStore);

const toast = useToast();

const isStudentList = computed(() => route.name === "student");
const { studentSearchCondition, scoreSearchCondition } =
  storeToRefs(searchStore);

const route = useRoute();
const router = useRouter();
function onClick() {
  if (route.name === "score") {
    router.push({ name: "score-upload" });
  } else {
    router.push({ name: "student-create" });
  }
}

const searchString = ref("");

function onSearch() {
  if (!searchString.value.length) {
    toast.warning("Please input search string");
  }

  if (isStudentList.value) {
    studentSearchCondition.value = [
      ...studentSearchCondition.value,
      searchString.value.toLowerCase(),
    ];
  } else {
    scoreSearchCondition.value = [
      ...scoreSearchCondition.value,
      searchString.value.toLowerCase(),
    ];
  }
  searchString.value = "";
}

function onDelete(index) {
  if (isStudentList.value) {
    studentSearchCondition.value.splice(index, 1);
  } else {
    scoreSearchCondition.value.splice(index, 1);
  }
}
</script>
